import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Input, Select, DatePicker} from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import moment from 'moment';
const { RangePicker } = DatePicker;
interface Props {
  current: number,
  form: any,
  dispatch?: Function,
  handleExport?: Function,
  initCurrent?: Function
}

const FormItem = Form.Item;
const Option = Select.Option;

@connect()
class Search extends Component<Props, any> {

  state = {
    startNum: '',
    endNum: '',
    status: '',
    endOpen: false,
    dateTimeStart: '',
    dateTimeEnd: ''
  };

  changeExport = () => {
    this.props.handleExport();
  };

  disabledStartDate = (dateTimeStart) => {
    const dateTimeEnd = this.state.dateTimeEnd;
    if (!dateTimeStart || !dateTimeEnd) {
      return false;
    }
    return dateTimeStart.valueOf() > dateTimeEnd.valueOf();
  };

  disabledEndDate = (dateTimeEnd) => {
    const dateTimeStart = this.state.dateTimeStart;
    if (!dateTimeEnd || !dateTimeStart) {
      return false;
    }
    return dateTimeEnd.valueOf() <= dateTimeStart.valueOf();
  };

  onChange = (field, value) => {
    this.setState({
      [field]: value,
    });
  };

  onStartChange = (value) => {
    this.onChange('dateTimeStart', value);
  };

  onEndChange = (value) => {
    this.onChange('dateTimeEnd', value);
  };

  handleStartOpenChange = (open) => {
    if (!open) {
      this.setState({ endOpen: true });
    }
  };

  handleEndOpenChange = (open) => {
    this.setState({ endOpen: open });
  };

  search = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (values.isRectified === '10') {
          values.isRectified = '';
        }
        if (values.riskDateTime === '10') {
          values.riskDateTime = '';
        }
        if (this.state.dateTimeStart || this.state.dateTimeEnd) {
          values.dateTimeStart = moment(this.state.dateTimeStart).format('YYYY-MM-DD hh:mm:ss');
          values.dateTimeEnd = moment(this.state.dateTimeEnd).format('YYYY-MM-DD hh:mm:ss');
        }
        dispatch({
          type: 'analyse_danger/updateQuestionCond',
          payload: {
            pageNum: 1,
            pageSize: 10,
            ...values
          }
        });
        this.props.initCurrent()
      }
    });
  };
  handleChangeTime = (value) => {
    const {  dispatch } = this.props;
    let cond = {}
    cond['dateTimeStart'] = Array.isArray(value) && value[0] ? moment(value[0]).format("YYYY-MM-DD hh:mm:ss") : null;
    cond['dateTimeEnd'] = Array.isArray(value) && value[1] ? moment(value[1]).format("YYYY-MM-DD hh:mm:ss") : null;
    
    dispatch({
              type: 'analyse_danger/updateQuestionCond',
              payload: {
                pageNum: 1,
                pageSize: 10,
                ...cond
              }
            });
            this.props.initCurrent()
  }
  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={0}  span={4}>
            <FormItem
            {...formItemLayout}
            label='整改类型'
            >
              {getFieldDecorator('isRectified', {
                initialValue: '10'
              })(
                <Select>
                  <Option value="10">全部</Option>
                  <Option value="0">未整改</Option>
                  <Option value="1">已整改</Option>
                </Select>
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={1}  span={4}>
            <FormItem
             {...formItemLayout}
             label='选择时段'
            >
              {getFieldDecorator('riskDateTime', {
                initialValue: '10'
              })(
                <Select>
                  <Option value="10">全部</Option>
                  <Option value="0">当日</Option>
                  <Option value="1">最近一周</Option>
                  <Option value="2">最近一月</Option>
                  <Option value="3">最近一季</Option>
                </Select>
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={2} span={4}>
            <FormItem
              label="上报人"
              {...formItemLayout}
            >
              {getFieldDecorator('updaterName')(
                <Input placeholder="请输入上报人" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol  key={3} span={7}>
          <FormItem
              label="时间"
              {...formItemLayout}
            >
              {getFieldDecorator('pushTime')(
                <RangePicker
                  showTime={false}
                  format="YYYY-MM-DD"
                  placeholder={['开始日期', '结束日期']}
                  onChange={(v) => this.handleChangeTime(v)}
                />
              )}
            </FormItem>
            {/* <DatePicker
              disabledDate={this.disabledStartDate}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              value={this.state.dateTimeStart ? moment(this.state.dateTimeStart) : null}
              placeholder="Start"
              onChange={this.onStartChange}
              onOpenChange={this.handleStartOpenChange}
            />
            <span style={{ 'marginLeft': '10px' }}></span>
            <DatePicker
              disabledDate={this.disabledEndDate}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              value={this.state.dateTimeEnd ? moment(this.state.dateTimeEnd) : null}
              placeholder="End"
              onChange={this.onEndChange}
              open={this.state.endOpen}
              onOpenChange={this.handleEndOpenChange}
            /> */}
          </SearchCol>
          <SearchCol style={{ marginTop: '0px',marginBottom:'0px'}} key={4} span={5}>
            <SearchRow type="flex" justify="end">
              <SearchButton htmlType="submit">搜索</SearchButton>
              <SearchButton onClick={() => {
                this.props.form.resetFields();
                this.setState({
                  dateTimeStart: '',
                  dateTimeEnd: ''
                })
              }} style={{ 'marginLeft': '15px' }}>重置</SearchButton>
              <SearchButton style={{ 'marginLeft': '15px' }} onClick={this.changeExport}>导出</SearchButton>
            </SearchRow>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create()(Search);
export default SearchS;
